<template>
  <div>
    <div class="overlay nav-btm">
      <div class="overlay-content scrolling">
        <div class="head">
          <div @click="back" class="return"></div>
        </div>
        <!--				<img :src="list.xq.picture" style="width: 100%;margin-top: -45px;">-->
        <van-swipe :autoplay="3000" indicator-color="white" @change="onChangeSwipe">
          <van-swipe-item v-for="(item,index) in pictureDetails" :key="index">
            <img :src="item.img" style="width: 100%;">
          </van-swipe-item>
        </van-swipe>
        <div style="position: relative;">
          <div
            style="position:absolute;right: 0;margin: -30px 10px;background: rgb(125, 126, 128);padding: 0px 10px;border-radius: 10px;opacity: 0.5;">
            <span style="opacity: 1;color: black;">{{current + 1}}/{{pictureDetails.length}}</span>
          </div>
        </div>
        <div style="background: rgb(247,73,81);height: 40px;">
          <div style="padding: 7px;padding-left: 15px;">
            <van-count-down v-if="list.xq.lotteryTime >= list.xq.systemTime && leng == 1" :time="list.xq.lotteryTime - list.xq.systemTime" format="DD 天 HH 时 mm 分 ss 秒后开奖" />
            <van-count-down v-if="list.xq.lotteryTime >= list.xq.systemTime && (leng == 2 || leng == undefined)" :time="list.xq.lotteryTime - list.xq.systemTime" format="DD D HH T mm M ss S Post-launch" />
            <van-count-down v-if="list.xq.lotteryTime >= list.xq.systemTime && leng == 3" :time="list.xq.lotteryTime - list.xq.systemTime" format="DD D HH T mm M ss S Thứ hai Hậu ra mắt" />
            <span v-if="list.xq.lotteryTime < list.xq.systemTime && list.xq.luckyNumber != null">
							{{$t('Details.v1')}}
						</span>
            <span v-if="list.xq.lotteryTime < list.xq.systemTime && list.xq.luckyNumber == null">
							{{$t('Details.v2')}}
						</span>
          </div>
          <div class="btn">
            <van-button round type="danger">
              <span v-text="$t('Details.v3') + ' ' + parseFloat(list.xq.price).toFixed(3).slice(0,-1)">价值￥5000</span>
            </van-button>
          </div>
        </div>
        <div style="background: white;color: black;overflow: hidden;padding-bottom: 30px;">
          <div style="padding-top: 15px;padding-left: 20px;padding-bottom: 10px;font-weight: 600;">
            <span v-text="list.xq.title">海尔冰箱43寸</span>
            <span
              style="float: right;padding-right: 20px;font-size: 12px;padding-top: 3px;font-weight: 500;color: rgb(153, 153, 153);">{{$t('Details.v4')}}：{{ list.xq.lotteryTime | dateFormat }}</span>
          </div>
          <div style="padding-bottom: 10px;" align="center">
            <van-progress :percentage="Number(per)" color="rgb(60,167,109)"/>
          </div>
          <van-row type="flex" justify="space-between" gutter="10">
            <van-col span="8">
              <div align="center">
                <div style="font-size: 12px;color: #999999;">{{$t('Details.v5')}}</div>
                <div style="padding: 10px 0px;font-size: 13px;">
                  <span
                    v-text="parseFloat(Number(list.details.num * list.details.oneAddc)).toFixed(3).slice(0,-1)">4000</span>
                  <span>EXUU</span>
                </div>
              </div>
            </van-col>
            <van-col span="8">
              <div align="center">
                <div style="font-size: 12px;color: #999999;">{{$t('Details.v6')}}</div>
                <div style="padding: 10px 0px;font-size: 13px;">
                  <span v-text="parseFloat(Number(list.details.oneAddc * list.details.total)).toFixed(3).slice(0,-1)">800</span>
                  <span>EXUU</span>
                </div>
              </div>
            </van-col>
            <van-col span="8">
              <div align="center">
                <div style="font-size: 12px;color: #999999;">{{$t('Details.v7')}}</div>
                <div style="padding: 10px 0px;font-size: 13px;">
                  <span v-text="list.details.num">400</span>
                </div>
              </div>
            </van-col>
          </van-row>
          <!--
                        作者：ceet@vip.qq.com
                        时间：2019-07-10
                        描述：参与抽奖成功
                    -->
          <div align="center" style="padding-top: 30px;" v-if="state == 1 && id == 1">
            <ul class="gradient">
              <li>
                <div style="padding-top: 20px;padding-bottom: 10px;border-bottom: 1px dashed white;">
                  <div>{{$t('Details.v8')}}</div>
                  <div>
                    <span>{{ list.xq.lotteryTime | dateFormat }}</span>
                    <span>{{$t('Details.v9')}}</span>
                  </div>
                </div>
                <div style="padding-top: 20px;padding-bottom: 20px;">
                  <div style="padding-top: 5px;" v-for="(item,index) in list.haoma" :key="index">
                    <van-row style="border: 1px solid white;border-radius: 5px;">
                      <van-col span="10" style="background: white;color: black;padding: 5px 10px;font-size: 14px;">
                        {{$t('Details.v10')}}
                      </van-col>
                      <van-col span="14"
                               style="background: transparent;padding: 5px 10px;font-size: 14px;letter-spacing:3px"
                               v-text="item.luckyNumber">24652135
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--
                    作者：ceet@vip.qq.com
                    时间：2019-07-10
                    描述：抽奖中奖
                -->
        <div v-if="id == 2 && list.xq.sign == 1">
          <div class="exple" style="padding-bottom: 20px;padding-top: 20px;">
            <span class="line3"></span>
            <span class="txt2">
							<span>{{$t('Details.v11')}}</span>
						</span>
            <span class="line4"></span>
            <div style="color: black;padding-top: 5px;">
              <span>{{$t('Details.v12')}}</span>
              <span style="font-size: 18px;font-weight: 550;" v-text="list.xq.trueName">雨落秋垣</span>
              <span>{{$t('Details.v13')}}</span>
            </div>
            <div style="color: black;padding-top: 5px;">
              <span>{{$t('Details.v14')}}:</span>
              <span v-text="list.xq.luckyNumber">123456789</span>
            </div>
          </div>
          <div style="background: white;color: black;overflow: hidden;padding-bottom: 30px;">
            <div align="center" style="padding-top: 30px;">
              <ul class="gradient">
                <li>
                  <div style="padding-top: 20px;padding-bottom: 10px;">&nbsp;&nbsp;{{$t('Details.v15')}}&nbsp;&nbsp;
                  </div>
                  <div style="padding-top: 20px;padding-bottom: 20px;">
                    <van-row style="border: 1px solid white;border-radius: 5px;">
                      <van-col span="10" style="background: white;color: black;padding: 5px 10px;font-size: 14px;">
                        {{$t('Details.16')}}
                      </van-col>
                      <van-col span="14"
                               style="background: transparent;padding: 5px 10px;font-size: 14px;letter-spacing:3px"
                               v-text="list.xq.luckyNumber">24652135
                      </van-col>
                    </van-row>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--
                    作者：ceet@vip.qq.com
                    时间：2019-07-10
                    描述：抽奖未中奖
                -->
        <div v-if="id == 2 && list.xq.sign == 0">
          <div class="exple" style="padding-bottom: 20px;padding-top: 20px;">
            <span class="line3"></span>
            <span class="txt2">
							<span>{{$t('Details.v17')}}</span>
						</span>
            <span class="line4"></span>
            <div style="color: black;padding-top: 5px;">
              <span>{{$t('Details.v18')}}</span>
              <span style="font-size: 18px;font-weight: 550;" v-text="list.xq.trueName">雨落秋垣</span>
              <span>{{$t('Details.v19')}}</span>
            </div>
            <div style="color: black;padding-top: 5px;">
              <span>{{$t('Details.v20')}}:</span>
              <span v-text="list.xq.luckyNumber">123456789</span>
            </div>
          </div>
          <div style="background: white;color: black;overflow: hidden;padding-bottom: 30px;">
            <div align="center" style="padding-top: 30px;">
              <ul class="gradient2">
                <li>
                  <div style="padding-top: 20px;padding-bottom: 10px;">&nbsp;&nbsp;{{$t('Details.v21')}}&nbsp;&nbsp;
                  </div>
                  <div style="padding-top: 20px;padding-bottom: 20px;">
                    <van-row style="border: 1px solid white;border-radius: 5px;">
                      <van-col span="10" style="background: white;color: black;padding: 5px 10px;font-size: 14px;">
                        {{$t('Details.v22')}}
                      </van-col>
                      <van-col span="14"
                               style="background: transparent;padding: 5px 10px;font-size: 14px;letter-spacing:3px"
                               v-text="list.xq.luckyNumber">24652135
                      </van-col>
                    </van-row>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--
                    作者：ceet@vip.qq.com
                    时间：2019-07-10
                    描述：参与人数（只有正在抽奖和参与抽奖成功的时候显示）
                -->
        <div v-if="listData != ''">
          <div style="padding: 15px;color: black;font-size: 18px;font-weight: 700;">
            {{$t('Details.v23')}}
          </div>
          <div style="background: white;color: black;padding: 10px 0px;">
            <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight" class="seamless-warp">
              <ul class="item">
                <li v-for="(item,index) in listData" :key="index">
                  <div class="luckily" v-if="list.xq.luckyNumber == null">
                    <!--<img :src="list.xq.id % 2 ? '../../assets/recreation/logo1.png' : '../../assets/recreation/logo2.png'" style="width: 35px;height: 35px;border-radius: 50%;" />-->
                    <img
                      :src="index % 2 == 0 ? require('../../assets/recreation/logo1.png') : require('../../assets/recreation/logo2.png')"
                      style="width: 35px;height: 35px;border-radius: 50%;"/>
                    <span style="padding-left: 5px;" v-text="item.name">李某某</span>
                    <span v-text="$t('Details.v24') +' ' + item.number">幸运号码123456</span>
                  </div>
                  <div v-if="list.xq.luckyNumber != null"
                       :class="'luckily ' + ((item.luckyNumber == item.number) ? 'upMoney' : '')">
                    <img src="../../assets/recreation/logo3.png" style="width: 35px;height: 35px;border-radius: 50%;"/>
                    <span style="padding-left: 5px;" v-text="item.name">李某某</span>
                    <span v-text="$t('Details.v24')+ ' ' + item.number">幸运号码123456</span>
                  </div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <!--
                    作者：ceet@vip.qq.com
                    时间：2019-07-10
                    描述：明日开始参与
                -->
        <div class="exple" style="padding-bottom: 0px;padding-top: 15px;" v-if="list.xq.nextDay == 1">
          <span class="line"></span>
          <span class="txt">{{$t('Details.v25')}}</span>
          <span class="line2"></span>
        </div>
        <div style="color: black;">
          <van-tabs v-model="active" swipeable>
            <van-tab :title="$t('Details.v26')">
              <div style="padding-top: 10px;">
                <div
                  style="background: white;font-size: 12px;color: #7d7e80;letter-spacing:1px;line-height: 20px;padding: 10px;"
                  v-html="list.xq.details">
                  这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情这里是产品详情
                  <img src="../../assets/images/g2.jpg" style="width: 100%;height: 100%;padding-top: 5px;"/>
                </div>
              </div>
            </van-tab>
            <van-tab :title="$t('Details.v27')">
              <div class="product" v-if="list2 != ''" style="padding-top: 10px;">
                <div class="product_list" v-for="item in list2" :key="item.id" @click="getDay(item.id)">
                  <div class="product_content weui-flex">
                    <div class="img"><img :src="item.picture" alt="" style="width: 100px;height: 100px;"></div>
                    <div class="weui-flex__item">
                      <div class="bt" v-text="item.title">苹果手机 标题 in苹果核4G通许手机</div>
                      <div class="red" style="color: #f94951;">
                        <span>{{$t('Details.v3')}}</span>
                        <span v-text="item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">2000</span>
                      </div>
                      <div class="btm c1">
                        <div v-if="item.typeId == 2">{{$t('Details.v28')}}</div>
                        <div v-if="item.typeId == 1">{{$t('Details.v29')}}</div>
                        <div v-if="item.standard == 0">{{$t('Details.v30')}}</div>
                        <div v-if="item.standard == 1">{{$t('Details.v31')}}</div>
                        <div class="">
                          {{ item.lotteryTime | dateFormat }}
                          <span>&nbsp;{{$t('Details.v32')}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <div
      v-if="(id == 1 && list.xq.repeated == 2 && state == 1) || (id == 1 && list.xq.repeated == 2 && state == 0) || Number(per) == 100"
      align="center"
      style="text-align: center;background-color: rgb(153,153,153);color: white;font-size: 16px;width: 100%;padding: 10px 0;position: fixed;bottom: 0;">
      <span v-if="(id == 1 && list.xq.repeated == 2 && state == 1) || (id == 1 && list.xq.repeated == 2 && state == 0)">{{$t('Details.v33')}}</span>
      <span v-if="Number(per) == 100">{{$t('Details.v34')}}</span>
    </div>
    <div
      v-if="((id == 1 && list.xq.repeated == 1 && state == 0) || (id == 1 && list.xq.repeated == 1 && state == 1) || list.xq.nextDay != 1) && Number(per) != 100"
      @click="sure" align="center"
      style="text-align: center;background-color: rgb(249,73,81);color: white;font-size: 16px;width: 100%;padding: 10px 0;position: fixed;bottom: 0;">
      {{$t('Details.v35')}}
    </div>
    <div v-if="list.xq.nextDay == 1" align="center"
         style="text-align: center;background-color: rgb(153,153,153);color: white;font-size: 16px;width: 100%;padding: 10px 0;position: fixed;bottom: 0;">
      {{$t('Details.v36')}}
    </div>
    <div v-if="list.xq.lotteryTime < list.xq.systemTime" align="center"
         style="text-align: center;background-color: rgb(153,153,153);color: white;font-size: 16px;width: 100%;padding: 10px 0;position: fixed;bottom: 0;">
      <span v-if="list.xq.lotteryTime < list.xq.systemTime">{{$t('Details.v37')}}</span>
      <!--<span v-if="list.xq.stopTime < list.xq.systemTime && id ==1">参与抽奖（已停止，等待开奖）</span>-->
    </div>
    <van-popup v-model="show" class="show" position="bottom">
      <div style="padding-left: 20px;padding-right: 20px;">{{$t('Details.v38')}}</div>
      <div style="padding-left: 20px;color: rgb(153, 153, 153);font-size: 13px;">{{$t('Details.v39')}}</div>
      <div align="center" style="font-size: 12px;padding: 10px 0px;">
        <div style="background-color: rgb(244, 244, 244);padding: 3px 10px;border-radius: 10px;width: 50%;clear:both;"
             v-text="$t('Details.v40')+' ' + parseFloat(listDB.addc).toFixed(3).slice(0,-1)">消耗100 EXUU
        </div>
      </div>
      <van-icon name="cross" color="#7d7e80" @click="closeCross"/>
      <div style="padding: 5px 15px;">
        <div align="center" style="padding: 20px 0px;">
          <van-stepper v-model.trim="value" :min="listDB.addc" :max="listDB.balance" async-change @change="onChange"/>
        </div>
        <div align="center" style="font-size: 13px;">
          <div v-if="Number(listDB.balance) >= Number(listDB.addc)">
            <span
              v-text="$t('Details.v41') + '  ' + parseFloat(listDB.balance).toFixed(3).slice(0,-1) + ' EXUU'">您的余额一共有 1000 EXUU，</span>
            <span style="color: #1989FA;" @click="joinMoney">{{$t('Details.v42')}}</span>
          </div>
          <div v-if="Number(listDB.balance) < Number(listDB.addc)">
            <span
              v-text="$t('Details.v41') + '  ' + parseFloat(listDB.balance).toFixed(3).slice(0,-1) + ' ' + $t('Details.v49')">您的余额一共有 1000 EXUU,你的 EXUU 不足，</span>
            <span style="color: #1989FA;" @click="OutChange">{{$t('Details.v43')}}</span>
          </div>
        </div>
        <div style="padding: 15px 20px;">
          <van-button slot="button" size="normal" type="info" @click="sureOk" :loading="load">{{$t('Details.v44')}}
          </van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show2" class="money" :close-on-click-overlay="false">
      <van-icon name="cross" color="#7d7e80" size="20" @click="closeMoney"/>
      <div style="font-size: 22px;padding-left: 15px;">{{$t('Details.v45')}}！</div>
      <div style="padding-top: 60px;font-size: 18px;">{{$t('Details.v46')}}</div>
      <div style="padding-top: 10px;font-size: 16px;" v-text="lucky">123456</div>
    </van-popup>
  </div>
</template>

<script>
    let _this;
    import {recreation} from './../../utils/api';
    import {dateFormat} from 'vux';
    import {Dialog} from 'vant';

    export default {
        data() {
            return {
                id: 0, // 1：进行中    2：已结束  3：已领奖   4：异常
                state: 0, // 0：未参与   1：已参与
                show: false,
                show2: false,
                value: 0,
                load: false,
                list: {
                    'people': [],
                    'xq': [],
                    'details': []
                }, // 抽奖的详情
                list2: [], // 今日抽奖
                size: 1000,
                per: 0, // 参与百分比
                listDB: [], // 查询抽奖的信息
                lucky: '', // 幸运号码
                listData: [],
                type: this.$route.query.type,
                pictureDetails: [],
                current: 0,
                active: 0,
                leng: ''
            }
        },
        computed: {
            optionSingleHeight() {
                return {
                    hoverStop: false // 鼠标悬停
                }
            }
        },
        beforeCreate() {
            _this = this;
        },
        watch: {
            value: function () {
                let value = '' + this.value;
                value = value
                    .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
                    .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
                    .replace('.', '$#$')
                    .replace(/\./g, '')
                    .replace('$#$', '.')
                    .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
                if (value.indexOf('.') < 0 && value != '') {
                    // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                    value = parseFloat(value);
                }
                this.value = value;
            }
        },
        mounted() {
            this.leng = localStorage.leng;
            this.getList(); // 查询抽奖详情
            this.getList2(); // 查询今日抽奖
            this.initList();
        },
        methods: {
            initList() {
                this.myInterval = window.setInterval(() => {
                    setTimeout(() => {
                        this.getList();
                        this.getList2();
                    }, 1);
                }, 1000);
            },
            onChange(val) {
                if (val < this.listDB.addc) {
                    this.$toast(this.$t('Details.v47'));
                }
                if (val > this.listDB.balance) {
                    this.$toast(this.$t('Details.v47'));
                }
            },
            onChangeSwipe(index) {
                this.current = index;
            },
            sure() { // 参与抽奖的按钮
                // 查询抽奖的信息
                recreation.getInformation({
                    publishId: this.type,
                    coinId: 1 // EXUU 的币种 ID 为1
                }).then(res => {
                    if (res.code == 200) {
                        this.listDB = res.data;
                        this.value = this.listDB.addc; // 这里取最小值
                        this.show = true;
                    }
                })
            },
            joinMoney() { // 全部参与
                this.value = this.listDB.balance;
            },
            closeCross() {
                this.show = false;
            },
            closeMoney() {
                this.show = false;
                this.show2 = false;
            },
            nextUpdatePayPassword() { // 忘记支付密码
                this.$router.push({
                    path: '/UpdateMb'
                });
            },
            sureOk() { // 确定参与
                if (!this.value) {
                    this.$toast(this.$t('Details.v48'));
                    return false;
                }
                this.load = true;
                recreation.getJoin({
                    publishId: this.type,
                    joinAddc: this.value,
                    coinId: 1 // EXUU 的币种 ID 为1
                }).then(res => {
                    if (res.code == 200) { // 参与成功后
                        this.show = false;
                        this.show2 = true;
                        this.lucky = res.data[0]; // 幸运号码，永远取值第一条
                    }
                    this.$toast(res.msg);
                    this.getList();
                    this.getList2();
                    this.load = false;
                })
            },
            getList() { // 抽奖详情
                this.axios.get(process.env.API_HOST + 'browse/treasureDetails/' + this.type).then(res => {
                    if (res.data.code == 200) {
                        this.list = res.data.data;
                        this.listData = this.list.people;
                        this.per = parseFloat(Number(this.list.details.num * this.list.details.oneAddc) / Number(this.list.details.oneAddc * this.list.details.total) * 100).toFixed(3).slice(0, -1);
                        this.id = this.list.xq.type;
                        this.state = this.list.xq.state;
                        const baseList = [];
                        for (let i = 0; i < res.data.data.xq.pictureDetails.split(";").length; i++) {
                            baseList.push({
                                img: res.data.data.xq.pictureDetails.split(";")[i]
                            })
                        }
                        this.pictureDetails = baseList;
                    }
                })
            },
            getList2() { // 今日抽奖
                recreation.getTodayTreasure({
                    current: 1,
                    size: this.size
                }).then(res => {
                    if (res.code == 200) {
                        this.list2 = res.data.records;
                    }
                })
            },
            back() { // 返回按钮
                this.$router.push({
                    name: this.$route.query.typeName
                })
            },
            getDay(id) { // 今日抽奖的点击事件
                clearInterval(this.myInterval);
                this.$router.push({
                    path: '/Details',
                    query: {
                        type: id,
                        typeName: this.$route.query.typeName
                    }
                })
                this.type = id;
                this.$nextTick(() => {
                    this.initList();
                })
            },
            OutChange() {
                this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置支付密码
                    if (res.data.data == 1) { // 当true为已设置交易密码
                        this.$router.push({
                            path: '/ToChange'
                        })
                    } else {
                        let _this = this
                        Dialog.confirm({
                            message: this.$t('Details.v50') + '！',
                            confirmButtonText: this.$t('Details.v51'),
                            cancelButtonText: this.$t('Details.v52'),
                            cancelButtonColor: 'white'
                        }).then(() => {
                            _this.$router.push({
                                path: '/UpdatePayPwd',
                                query: {
                                    type: 0,
                                    roid: 'Details',
                                    type_c: this.$route.query.type,
                                    typeName: this.$route.query.typeName
                                }
                            })
                        }).catch(() => { //稍后设置

                        });
                    }
                })
            }
        },
        destroyed() {
            clearInterval(this.myInterval);
        },
        filters: {
            dateFormat
        }
    }
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head {
    background-color: transparent;
    width: 15%;
    position: absolute !important;
  }

  .head ~ .overlay {
    top: 0px;
  }

  .nav-btm {
    bottom: 40px;
  }

  .head .return:after {
    border-color: black;
  }

  .luckily {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
  }

  /deep/ .show {
    background: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 10px;
    color: black;
  }

  /deep/ .show .van-stepper__input {
    background: transparent;
    border: 1px solid rgb(244, 244, 244);
    color: black;
    border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 0px 55px;
  }

  /deep/ .show .van-stepper__minus {
    border-radius: 50%;
  }

  /deep/ .show .van-stepper__minus--disabled,
  .van-stepper__minus--disabled:active,
  .van-stepper__plus--disabled,
  .van-stepper__plus--disabled:active {
    background: rgb(244, 244, 244);
  }

  /deep/ .show .van-stepper__plus {
    background: rgb(254, 32, 32);
    border-radius: 50%;
    width: 60px;
    height: 60px
  }

  /deep/ .show .van-stepper__minus,
  .van-stepper__plus {
    width: 60px;
    height: 60px;
  }

  /deep/ .show .van-button {
    height: 38px;
    line-height: 36px;
  }

  /deep/ .show .van-icon {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  /deep/ .show .van-stepper__minus::before,
  .van-stepper__plus::before {
    width: 18px;
    height: 2px;
  }

  /deep/ .show .van-stepper__plus::after {
    width: 2px;
    height: 18px;
    background-color: white;
  }

  /deep/ .show .van-stepper__plus::before {
    width: 18px;
    height: 2px;
    background-color: white;
  }

  /deep/ .show .van-button--info {
    background: -webkit-linear-gradient(left, rgb(255, 81, 16), rgb(255, 33, 32));
    border: none;
  }

  /deep/ .money {
    border-radius: 10px;
    text-align: center;
    width: 70%;
    padding-top: 50px;
    padding-bottom: 80px;
    font-size: 22px;
    background: radial-gradient(rgb(250, 128, 0), rgb(250, 68, 8));
    color: white;
    font-weight: 600;
  }

  /deep/ .money .van-icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  /deep/ .money .van-icon-cross {
    color: white !important;
  }

  .exple {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .line {
    display: inline-block;
    width: 20px;
    margin-bottom: 5px;
    margin-right: 20px;
    height: 3px;
    background: #00dd94;
  }

  .line2 {
    display: inline-block;
    width: 20px;
    margin-bottom: 5px;
    margin-left: 20px;
    height: 3px;
    background: #00dd94;
  }

  .line3 {
    display: inline-block;
    width: 20px;
    margin-bottom: 5px;
    margin-right: 10px;
    height: 3px;
    background: rgb(247, 73, 81);
  }

  .line4 {
    display: inline-block;
    width: 20px;
    margin-bottom: 5px;
    margin-left: 10px;
    height: 3px;
    background: rgb(247, 73, 81);
  }

  .txt {
    color: black;
    font-size: 18px;
    font-weight: 550;
  }

  .txt2 {
    color: black;
    font-size: 16px;
  }

  .btn {
    margin-top: -65px;
    margin-left: 15px;
  }

  .btn button {
    width: auto;
    height: 22px;
    line-height: 20px;
    font-size: 12px;
  }

  .gradient {
    list-style: none;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: white;
  }

  .gradient li {
    position: relative;
    height: 100%;
    background: rgb(241, 43, 95);
    display: inline-block;
    padding: 0px 30px;
  }

  .gradient li:before,
  .gradient li:after {
    content: "";
    position: absolute;
    top: -20px;
    display: block;
    width: 10px;
    height: 100%;
    margin-top: 20px;
    background-size: 20px 10px;
  }

  .gradient li:before {
    left: -10px;
    background-color: #fff;
    background-position: 100% 35%;
    background-image: linear-gradient(-45deg, rgb(241, 43, 95) 25%, transparent 25%, transparent), linear-gradient(-135deg, rgb(241, 43, 95) 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, rgb(241, 43, 95) 75%), linear-gradient(-135deg, transparent 75%, rgb(241, 43, 95) 75%);
  }

  .gradient li:after {
    right: -10px;
    background-color: rgb(241, 43, 95);
    background-position: 100% 15%;
    background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent), linear-gradient(-135deg, #fff 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, #fff 75%), linear-gradient(-135deg, transparent 75%, #fff 75%);
  }

  .gradient2 {
    list-style: none;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: white;
  }

  .gradient2 li {
    position: relative;
    height: 100%;
    background: rgb(153, 153, 153);
    display: inline-block;
    padding: 0px 30px;
  }

  .gradient2 li:before,
  .gradient2 li:after {
    content: "";
    position: absolute;
    top: -20px;
    display: block;
    width: 10px;
    height: 100%;
    margin-top: 20px;
    background-size: 20px 10px;
  }

  .gradient2 li:before {
    left: -10px;
    background-color: #fff;
    background-position: 100% 35%;
    background-image: linear-gradient(-45deg, rgb(153, 153, 153) 25%, transparent 25%, transparent), linear-gradient(-135deg, rgb(153, 153, 153) 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, rgb(153, 153, 153) 75%), linear-gradient(-135deg, transparent 75%, rgb(153, 153, 153) 75%);
  }

  .gradient2 li:after {
    right: -10px;
    background-color: rgb(153, 153, 153);
    background-position: 100% 15%;
    background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent), linear-gradient(-135deg, #fff 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, #fff 75%), linear-gradient(-135deg, transparent 75%, #fff 75%);
  }

  .seamless-warp {
    height: 200px;
    overflow: hidden;
    line-height: 30px;
  }

  .upMoney {
    background: rgb(247, 73, 81);
    color: white;
    font-size: 16px;
  }

  .van-count-down,
  .van-divider {
    line-height: 25px;
    color: white;
  }

  .van-progress {
    width: 85%;
  }

  .head {
    position: relative;
  }

  .return {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    z-index: 99;
  }

  .van-button--info {
    border: 0 !important;
  }

  /deep/ .van-tabs__nav--line {
    background: rgb(245, 245, 245);
    color: red;
  }

  /deep/ .van-tabs__line {
    background: rgb(60, 167, 109);
  }

  /deep/ .van-hairline--top-bottom::after {
    border-width: 0px;
  }
</style>
